.grid {
  width: 100%;
  height: auto;

  .my-contianer {
    width: 700px;
    height: 700px;
    background: lightgreen;
    box-sizing: border-box;
    padding: 10px;
    display: grid;

    //主轴 侧轴等justify-items 与flex等意
    /*
    -------------列------------
    1fr 相当于flex布局中的flex:1, 以此类推
    grid-template-columns: 跟几个单位即为几列展示
    */
    grid-template-columns: 100px 1fr 100px;
    /*
    --------------行-----------  同理
    */
    grid-template-rows: 100px 1fr 100px;
    grid-gap: 20px; //每个子元素grid之间的行间距
    grid-gap: 20px 10px; //每个子元素grid之间的a:行间距 b:列间距
    .left {
      background: yellow;
    }
    .right {
      background: blue;
    }
  }

  /*
  	通过命名区域布局
  */ 
  .grid-container {
    width: 700px;
    height: 700px;
    background: lightgreen;
    display: grid;
    grid-template-columns: 200px 1fr 1fr; /* 示例：三列 */
    grid-template-rows: 160px 70px; /* 2行：固定60px + 自动高度 */
    grid-template-areas:
      "header sidebar main"
      "one two three";
    gap: 10px;
    .header {
      // grid的子元素 使用aligin-self 来控制
      grid-area: header;
      align-self: center;
      justify-self: center;
    }
    .sidebar {
      grid-area: sidebar;
    }
    .main {
      grid-area: main;
      background: yellow;
    }
    .one {
      grid-area: one;
    }
    .two {
      grid-area: two;
    }
    .three {
      grid-area: three;
      background: red;
    }
  }
}
